<div class="row">
    <div class="col">
        <div class="card">
            <h4 class="card-title px-3 pt-3">用户评论列表</h4>
            <h6 class="card-subtitle px-3">评论信息</h6>
            <div class="card-body">
                <a class="btn btn-info" data-toggle="modal"
                   data-target="#myModal" href="#">添加评价</a>
                <div id="comment-list">
                    <table class="table basic-elaboration-tablet-search table-hover table-striped color-table info-table">
                        <thead>
                        <tr>
                            <th>评论编号</th>
                            <th>评论人编号</th>
                            <th>商品编号</th>
                            <th>评论内容</th>
                            <th>评论时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in comments">
                            <td>{{item.c_id}}</td>
                            <td>{{item.u_id}}</td>
                            <td>{{item.p_id}}</td>
                            <td>{{item.content}}</td>
                            <td>{{item.times}}</td>
                            <td>
                                <a class="btn btn-success" href="#">查看</a>
                                <a class="btn btn-primary" href="#">编辑</a>
                                <a class="btn btn-danger" href="#">删除</a>
                            </td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>
<!--评价信息-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="card">
                <div class="card-title px-3 pt-3">新增评论</div>
                <div class="card-subtitle px-3">添加评论信息</div>
                <div class="card-body">
                    <form class="form-material" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>评论人：</label>
                            <select name="u_id" class="form-control" id="user-list">
                                <option v-for="item in users" :value="item.id">{{item.id}} - {{item.name}}</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>商品编号：</label>
                            <input type="number" name="p_id" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>评论内容：</label>
                            <textarea cols="50" rows="10" name="content" class="form-control">在这里输入评论内容...</textarea>
                        </div>
                        <div>
                            <button class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $.getJSON("http://localhost:8080/comment", function (dto) {
            new Vue({
                el: "#comment-list",
                data: {
                    comments: dto.data
                }
            })
        });
        $.getJSON("http://localhost:8080/user", function (dto) {
            new Vue({
                el: "#user-list",
                data: {
                    users: dto.data
                }
            })
        });
    });
    $(function () {
        // 为所有 type="file" 的 input，设置预览
        $(":file").change(function () {
            var targetName = $(this).data("img");

            //使用这个方法来临时创建一个文件的链接，参数是一个file或者blob
            var path = URL.createObjectURL(this.files[0]);

            //将链接赋值给上面的图片src路径
            $(targetName).prop("src", path)
        });

        $("form").submit(function () {
            var data = new FormData(this);  // 传递的数据

            $.ajax({
                url: "http://localhost:8080/comment",
                data: data,
                type: "POST",
                processData: false,
                contentType: false,
                success: function (dto) {
                    //如果成功
                    if (dto.code == 1000) {
                        swal({
                            title: "评论成功",
                            type: "success",
                            confirmButtonText: "确定"
                        })
                    } else {
                        swal({
                            title: "评论失败",
                            text: dto.msg,
                            type: "error",
                            confirmButtonText: "确定"
                        })
                    }
                }
            });

            return false;
        });
    });
</script>